// 数量选择组件, 带加减按钮
<style lang="scss" scoped>
    .ui-input-number{
        background-color: #fff;
        padding: .5rem;
        padding-left: .5rem;
        &:first-of-type{
            margin-left: 0rem;
            padding-left: 0.5rem;
        }
    }
    .input-number-btn{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 5px 10px;
        transition: .3s;
        opacity: .8;
        &:active{
            opacity: 1;
            background-color: #3498db;
        }
        &.disabled{
            pointer-events: none;
            opacity: .3;
        }
        >img{
            height: 20px;
        }
    }
</style>
<template>
    <div class="ui-input-number ui-border-top flex col-center row-between">
        <span class="mr1 f08 flex-1 ui-clamp-1 ">{{title}}</span>
        <div class="flex col-stretch">
            <!-- 让ios自持:active伪类, 需要touchstart空事件 -->
            <a class="input-number-btn" :class="{disabled:isMin}" @click="minus()" @touchstart="">
                <img src="">
            </a>
            <input  v-model="n" type="number" class="ui-input ml05 mr05 text-center" style="width:2.2rem;border-radius:4px">
            <a class="input-number-btn" :class="{disabled:isMax}" @click="add()" @touchstart="">
                <img src="">
            </a>
        </div>
    </div>
</template>
<script>
    export default {
        name:'ui-input-number',
        props:{
            title:String,
            value:'',
            min:{
                type:Number,
                default:1
            },
            max:Number
        },
        data(){
            return {
                n: this.value || 1
            }
        },
        computed:{
            isMin(){
                return this.n<=this.min
            },
            isMax(){
                return this.n>=this.max
            }
        },
        methods:{
            add(){
                if (this.max===undefined || !this.isMax) {
                    this.n ++
                }
            },
            minus(){
                if (!this.isMin) {
                    this.n --
                }
            }
        },
        watch:{
            n(v){
                this.$emit('input',v)
            }
        },
    }
</script>